import React from 'react'
import { Container, ListGroup, Button } from 'react-bootstrap';
import { CSSTransition, TransitionGroup } from '../react-transition-group';
import './index.css'
const timeout = 1000;
function TransitionGroupPage() {
  const [items, setItems] = React.useState([
    { id: "0", text: '吃饭' },
    { id: "1", text: '睡觉' },
    { id: "2", text: '打豆豆' }
  ]);
  return (
    <Container>
      <ListGroup>
        <TransitionGroup>
          {
            items.map(({ id, text }, index) => (
              <CSSTransition
                key={id}
                timeout={timeout}
                classNames="item"
              >
                <ListGroup.Item>
                  <Button
                    style={{ marginRight: '10px' }}
                    onClick={() => setItems(items => items.filter(item => item.id !== id))}
                  > &times;</Button>
                  {text}
                </ListGroup.Item>
              </CSSTransition>
            ))
          }
        </TransitionGroup>
      </ListGroup>
      <Button onClick={() => setItems(items => [...items, { id: items.length, text: items.length }])}>ADD</Button>
    </Container>
  )
}


export default TransitionGroupPage